<template>
    <div class="container">
        <div class="box">
            <div class="box-show">
                <div class="show-header">
                    <span class="spans-icon">
                        <v-icon name="align-left" class="text-icon"></v-icon>
                    </span>
                    <span>产品销售渠道分析</span>

                </div>
                <div class="show-content">
                    <dv-capsule-chart :config="config" style="width:300px;height:200px" />
                </div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            config: {
                data: [
                    {
                        name: '南阳',
                        value: 167
                    },
                    {
                        name: '周口',
                        value: 67
                    },
                    {
                        name: '漯河',
                        value: 123
                    },
                    {
                        name: '郑州',
                        value: 55
                    },
                    {
                        name: '西峡',
                        value: 98
                    }
                ]
            }
        };
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {

    },
    methods: {

    },
    components: {

    },
};
</script>

<style lang="scss" scoped>
.container {
    width: 347px;
    height: 100%;
}

.box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    // padding: 16px 0 0 0;
    border-radius: 10px;

    .box-show {
        width: 100%;
        height: 100%;
        background: rgba(19, 25, 47, 0.6);
        display: flex;
        flex-wrap: wrap;
        border-radius: 5px;

        .show-header {
            margin: 10px;
            width: 100%;
            height: 20px;
            line-height: 20px;
            color: white;
            display: flex;
            align-items: center;

            // padding: 8px 0 0 0;
            .spans-icon {
                margin-top: 10px;
            }

            span {
                margin: 8px 0 0 8px;
                line-height: 20px;
                display: inline-block;
                color: #c3cbde;
                font-size: 12px;
            }
        }

        .show-content {
            width: 100%;
            height: 95%;
            display: flex;
            justify-content: center;

        }
    }
}
</style>
